<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="../lib/qrcode.min.js"></script>
    <script src="../src/watermark.min.js"></script>
</head>
<body>
<label for="content">请输入水印内容</label><input type="text" name="text" id="content" value="测试">
<input type="file" id="img" accept="image/*">
<div id="container"></div>

<script>
    const fileInput = document.querySelector('#img'),
        container = document.querySelector('#container')

    fileInput.onchange = async () => {
        let file = fileInput.files[0]
        const blob = await Watermark.attachAll(file, {
            textContent: document.querySelector('#content').value
        })
        const result = await Watermark.blobToImg(blob)
        container.innerHTML = ''
        container.appendChild(result)

        // 上传
        const fd = new FormData()
        fd.append('file', blob)
        // 文件名
        fd.append('name', file.name)
        $.ajax({
            type: 'POST',
            url: '/upload',
            data: fd,
            processData: false,
            contentType: false
        })
            .done(res => {
                alert(res)
            })
    }
</script>
</body>
</html>